import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import HomeScreen from './pages/home';
import CategoryScreen from './pages/category';
import CartScreen from './pages/cart';
import ProfileScreen from './pages/profile';

import { StyleSheet, View, TouchableOpacity, Text, Image } from 'react-native';

const BottomTab = createBottomTabNavigator();

export default () => {
  const TabBar = ({ state, descriptors, navigation }: any) => {
    const { routes, index } = state;

    return (
      <View style={styles.tabBarContainer}>
        {routes.map((route: any, i: number) => {
          const { options } = descriptors[route.key];
          const label = options.title;
          const isFocused = index === i;

          return (
            <TouchableOpacity
              key={label}
              style={styles.tabItem}
              onPress={() => {
                navigation.navigate(route.name);
              }}
            >
              <Image
                style={styles.icon}
                source={{
                  uri: 'https://img1.baidu.com/it/u=1893037563,2240947958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                }}
              />
              <Text
                style={{
                  fontSize: isFocused ? 14 : 12,
                  color: isFocused ? '#333' : '#999',
                  fontWeight: isFocused ? 'bold' : 'normal',
                }}
              >
                {label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };

  return (
    <BottomTab.Navigator tabBar={props => <TabBar {...props} />}>
      <BottomTab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          title: '首页',
          headerShown: false,
        }}
      />
      <BottomTab.Screen
        name="CategoryScreen"
        component={CategoryScreen}
        options={{
          title: '分类',
          headerShown: false,
        }}
      />
      <BottomTab.Screen
        name="CartScreen"
        component={CartScreen}
        options={{
          title: '购物车',
          headerShown: false,
        }}
      />
      <BottomTab.Screen
        name="ProfileScreen"
        component={ProfileScreen}
        options={{
          title: '未登录',
          headerShown: false,
        }}
      />
    </BottomTab.Navigator>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  tabBarContainer: {
    width: '100%',
    height: 52,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  tabItem: {
    height: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    width: 30,
    height: 30,
    resizeMode: 'contain',
  },
});
